<template>
  <div class="page-member">
    <div class="member">
      <div class="member-box">
        <div class="member-left">
          <div class="member-header">
            <!-- <Icon
              class="close"
              size="20"
              color="#ffffff"
              @click="closeMemberDialog"
              type="md-close"
            />-->
            <div class="member-user">
              <div class="author">
                <img :src="user_info.avatar" alt />
              </div>
              <span class="name">{{ user_info.acName }}</span>
              <span class="account">（ 账号：{{ user_info.account }} ）</span>
              <span
                class="name"
                v-if="isMember && Object.keys(member).length > 0"
              >{{ member.memberLevel | formatMember(this) }}</span>
              <span class="name" v-if="isMember && Object.keys(member).length > 0">
                {{formatDate(member.endTime)}}
                <span style="margin-left:6px;">过期</span>
              </span>
            </div>
            <div
              class="member-btn-list"
              :class="[
                  member_active === 'one'
                    ? 'one'
                    : member_active === 'two'
                    ? 'two'
                    : member_active === 'three'
                    ? 'three'
                    : ''
                ]"
            >
              <div class="member-btn-item" @click="memberHandle('one')">
                <img v-if="member_active != 'one'" src="/img/pc/member-one.png" alt />
                <img v-else src="/img/pc/member-one-active.png" alt />
                <span :class="[member_active === 'one' ? 'active' : '']">
                  {{
                  member_info.smallMemberName
                  }}
                </span>
              </div>
              <div class="member-btn-item" @click="memberHandle('two')">
                <img v-if="member_active != 'two'" src="/img/pc/member-two.png" alt />
                <img v-else src="/img/pc/member-two-active.png" alt />
                <span :class="[member_active === 'two' ? 'active' : '']">
                  {{
                  member_info.middleMemberName
                  }}
                </span>
              </div>
              <div class="member-btn-item" @click="memberHandle('three')">
                <img v-if="member_active != 'three'" src="/img/pc/member-three.png" alt />
                <img v-else src="/img/pc/member-three-active.png" alt />
                <span :class="[member_active === 'three' ? 'active' : '']">
                  {{
                  member_info.highMemberName
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="member-content" v-if="member_active === 'one'">
            <div class="content-title">
              <img src="/img/pc/member-xin.png" alt />
              <span>尊享特权</span>
            </div>
            <div class="content-list" v-if="memberList.length > 0">
              <p v-for="(item, index) in memberList[0].introduction" :key="index">{{ item }}</p>
            </div>
            <div class="content-price">
              <div
                :class="['price-item', priceActive === 1 ? 'active' : '']"
                @click="priceBtnHandle(1)"
                v-if="isShowMemberItem(1)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.smallMemberMonth }}</span>
                <span class="hr">/</span>
                <span class="date">月卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 2 ? 'active' : '']"
                @click="priceBtnHandle(2)"
                v-if="isShowMemberItem(2)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.smallMemberQuarter }}</span>
                <span class="hr">/</span>
                <span class="date">季卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 3 ? 'active' : '']"
                @click="priceBtnHandle(3)"
                v-if="isShowMemberItem(3)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.smallMemberYear }}</span>
                <span class="hr">/</span>
                <span class="date">年卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 4 ? 'active' : '']"
                @click="priceBtnHandle(4)"
                v-if="isShowMemberItem(4)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.smallMemberForever }}</span>
                <span class="hr">/</span>
                <span class="date">终身卡</span>
              </div>
            </div>
          </div>
          <div class="member-content" v-if="member_active === 'two'">
            <div class="content-title">
              <img src="/img/pc/member-xin.png" alt />
              <span>尊享特权</span>
            </div>
            <div class="content-list" v-if="memberList.length > 0">
              <p v-for="(item, index) in memberList[1].introduction" :key="index">{{ item }}</p>
            </div>
            <div class="content-price">
              <div
                :class="['price-item', priceActive === 5 ? 'active' : '']"
                @click="priceBtnHandle(5)"
                v-if="isShowMemberItem(5)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.middleMemberMonth }}</span>
                <span class="hr">/</span>
                <span class="date">月卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 6 ? 'active' : '']"
                @click="priceBtnHandle(6)"
                v-if="isShowMemberItem(6)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.middleMemberQuarter }}</span>
                <span class="hr">/</span>
                <span class="date">季卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 7 ? 'active' : '']"
                @click="priceBtnHandle(7)"
                v-if="isShowMemberItem(7)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.middleMemberYear }}</span>
                <span class="hr">/</span>
                <span class="date">年卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 8 ? 'active' : '']"
                @click="priceBtnHandle(8)"
                v-if="isShowMemberItem(8)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.middleMemberForever }}</span>
                <span class="hr">/</span>
                <span class="date">终身卡</span>
              </div>
            </div>
          </div>
          <div class="member-content" v-if="member_active === 'three'">
            <div class="content-title">
              <img src="/img/pc/member-xin.png" alt />
              <span>尊享特权</span>
            </div>
            <div class="content-list" v-if="memberList.length > 0">
              <p v-for="(item, index) in memberList[2].introduction" :key="index">{{ item }}</p>
            </div>
            <div class="content-price">
              <div
                :class="['price-item', priceActive === 9 ? 'active' : '']"
                @click="priceBtnHandle(9)"
                v-if="isShowMemberItem(9)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.highMemberMonth }}</span>
                <span class="hr">/</span>
                <span class="date">月卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 10 ? 'active' : '']"
                @click="priceBtnHandle(10)"
                v-if="isShowMemberItem(10)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.highMemberQuarter }}</span>
                <span class="hr">/</span>
                <span class="date">季卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 11 ? 'active' : '']"
                @click="priceBtnHandle(11)"
                v-if="isShowMemberItem(11)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.highMemberYear }}</span>
                <span class="hr">/</span>
                <span class="date">年卡</span>
              </div>
              <div
                :class="['price-item', priceActive === 12 ? 'active' : '']"
                @click="priceBtnHandle(12)"
                v-if="isShowMemberItem(12)"
              >
                <img class="buy-active" src="/img/pc/buy-active.png" alt />
                <span class="price">￥{{ member_info.highMemberForever }}</span>
                <span class="hr">/</span>
                <span class="date">终身卡</span>
              </div>
            </div>
          </div>
          <div class="content-hr"></div>
          <div class="member-footer">
            <div class="footer-left">
              <!-- <p class="left-title">请选择支付方式扫码支付</p> -->
              <!-- <div class="left-buy">
                <div class="buy-item">
                  <img src="/img/pc/weixin.png" alt />
                  <span>微信支付</span>
                  <div
                    class="buy-btn"
                    :class="[buy_active === 'weixin' ? 'active' : '']"
                    @click="buyBtnHandle('weixin')"
                  ></div>
                </div>
                <div class="buy-item">
                  <img src="/img/pc/zhifubao.png" alt />
                  <span>支付宝支付</span>
                  <div
                    class="buy-btn"
                    :class="[buy_active === 'zhifubao' ? 'active' : '']"
                    @click="buyBtnHandle('zhifubao')"
                  ></div>
                </div>
              </div>-->
              <p class="left-title">支付方式</p>
              <div class="left-buy">
                <div class="buy-item">
                  <span>
                    <Radio v-model="single">
                      <span style="font-size:20px;">余额支付</span>
                    </Radio>
                  </span>
                </div>
              </div>
              <div class="left-agreement">
                <img src="/img/pc/agreement.png" alt />
                <span>购买即同意，请认真阅读《</span>
                <span class="agreement">北京泓深会员服务协议</span>
                <span>》</span>
              </div>
            </div>
            <!-- <div class="footer-right"></div> -->
          </div>
          <div class="pay-btn" v-if="!isMember">
            <Button type="primary" @click="handleBuyMember">立即支付</Button>
          </div>
          <div class="pay-btn-old" v-else>
            <Button disabled>已购买{{smallSwitch}}</Button>
          </div>
        </div>
        <div class="member-right"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getMemberConfig,
  buyMember,
  getMember,
  getMemberList,
} from "~/api/member";
export default {
  data() {
    return {
      single: true,
      member_info: {},
      isOpenMember: false,
      member_active: "one",
      buy_active: "weixin",
      priceActive: 0,
      memberList: [],
      isMember: null,
      member: null,
      memberLevel: 0,
      durationType: 0,
      memberLevelSwitch: {},
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      login_type(state) {
        return state.login_type;
      },
      web_info(state) {
        return state.web_info;
      },
      major_tree(state) {
        return state.major_tree;
      },
      locales(state) {
        return state.locales;
      },
      locale(state) {
        return state.locale;
      },
      is_client_locale(state) {
        return state.is_client_locale;
      },
      kl_md(state) {
        return state.kl_md;
      },
    }),
    smallSwitch() {
      let arr = [];
      let keys = Object.keys(this.memberLevelSwitch.small)
        .filter((i) => this.memberLevelSwitch.small[i] == 1)
        .forEach((i) => {
          arr.push(this.levelHandle(i));
        });
      console.log(
        "smallKey",
        arr.sort(function (a, b) {
          return a - b;
        })[0]
      );
      if (arr.length > 0) {
        return arr.sort(function (a, b) {
          return a - b;
        })[0];
      } else {
        return null;
      }
    },
    middleSwitch() {
      let arr = [];
      let keys = Object.keys(this.memberLevelSwitch.middle)
        .filter((i) => this.memberLevelSwitch.middle[i] == 1)
        .forEach((i) => {
          arr.push(this.levelHandle(i));
        });
      console.log(
        "smallKey",
        arr.sort(function (a, b) {
          return a - b;
        })[0]
      );
      if (arr.length > 0) {
        return arr.sort(function (a, b) {
          return a - b;
        })[0];
      } else {
        return null;
      }
    },
    highSwitch() {
      let arr = [];

      let keys = Object.keys(this.memberLevelSwitch.high)
        .filter((i) => this.memberLevelSwitch.high[i] == 1)
        .forEach((i) => {
          arr.push(this.levelHandle(i));
        });
      console.log(
        "smallKey",
        arr.sort(function (a, b) {
          return a - b;
        })[0]
      );
      if (arr.length > 0) {
        return arr.sort(function (a, b) {
          return a - b;
        })[0];
      } else {
        return null;
      }
    },
  },
  watch: {
    priceActive() {
      this.getBuyQrcode();
    }
  },
  created() {
    console.log(this.$route);
    if (process.client) {
      this.$nextTick(() => {
        this.getData();
        if (this.token && Object.keys(this.user_info).length > 0) {
          this.getMember();
        }
      });
    }
  },
  mounted() {
    
    
  },
  filters: {
    formatMember(val, that) {
      switch (val) {
        case 0:
          return that.member_info.smallMemberName;
        case 1:
          return that.member_info.middleMemberName;
        case 2:
          return that.member_info.highMemberName;
        default:
          return "未知";
      }
    },
  },
  methods: {
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let add0 = (m) => {
        return m < 10 ? "0" + m : m;
      };
      return y + "-" + add0(m) + "-" + add0(d);
    },
    getBuyQrcode() {
      console.log("请求支付二维码");
    },
    isShowMemberItem(type) {
      if (Object.keys(this.memberLevelSwitch).length > 0) {
        switch (type) {
          case 1:
            if(this.memberLevelSwitch.small['smallMemberMonthSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 2:
            if(this.memberLevelSwitch.small['smallMemberQuarterSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 3:
            if(this.memberLevelSwitch.small['smallMemberYearSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 4:
            if(this.memberLevelSwitch.small['smallMemberForeverSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 5:
            if(this.memberLevelSwitch.middle['middleMemberMonthSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 6:
            if(this.memberLevelSwitch.middle['middleMemberQuarterSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 7:
            if(this.memberLevelSwitch.middle['middleMemberYearSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 8:
            if(this.memberLevelSwitch.middle['middleMemberForeverSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 9:
            if(this.memberLevelSwitch.high['highMemberMonthSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 10:
            if(this.memberLevelSwitch.high['highMemberQuarterSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 11:
            if(this.memberLevelSwitch.high['highMemberYearSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          case 12:
            if(this.memberLevelSwitch.high['highMemberForeverSwitch'] === 1){
              return true;
            }else{
              return false;
            }
            break;
          default:
            return false;
            break;
        }
      } else {
        return false;
      }
    },
    levelHandle(type) {
      switch (type) {
        case "smallMemberMonthSwitch":
          return 1;
          break;
        case "smallMemberQuarterSwitch":
          return 2;
          break;
        case "smallMemberYearSwitch":
          return 3;
          break;
        case "smallMemberForeverSwitch":
          return 4;
          break;
        case "middleMemberMonthSwitch":
          return 5;
          break;
        case "middleMemberQuarterSwitch":
          return 6;
          break;
        case "middleMemberYearSwitch":
          return 7;
          break;
        case "middleMemberForeverSwitch":
          return 8;
          break;
        case "highMemberMonthSwitch":
          return 9;
          break;
        case "highMemberQuarterSwitch":
          return 10;
          break;
        case "highMemberYearSwitch":
          return 11;
          break;
        case "highMemberForeverSwitch":
          return 12;
          break;
        default:
          return 0;
          break;
      }
    },
    priceBtnHandle(type) {
      this.priceActive = type;
      switch (type) {
        case 1:
          this.memberLevel = 0;
          this.durationType = 0;
          break;
        case 2:
          this.memberLevel = 0;
          this.durationType = 1;
          break;
        case 3:
          this.memberLevel = 0;
          this.durationType = 2;
          break;
        case 4:
          this.memberLevel = 0;
          this.durationType = 3;
          break;
        case 5:
          this.memberLevel = 1;
          this.durationType = 0;
          break;
        case 6:
          this.memberLevel = 1;
          this.durationType = 1;
          break;
        case 7:
          this.memberLevel = 1;
          this.durationType = 2;
          break;
        case 8:
          this.memberLevel = 1;
          this.durationType = 3;
          break;
        case 9:
          this.memberLevel = 2;
          this.durationType = 0;
          break;
        case 10:
          this.memberLevel = 2;
          this.durationType = 1;
          break;
        case 11:
          this.memberLevel = 2;
          this.durationType = 2;
          break;
        case 12:
          this.memberLevel = 2;
          this.durationType = 3;
          break;
      }
    },
    async handleBuyMember() {
      if(this.priceActive === 0){
        return false;
      }
      this.$Modal.confirm({
        title: "支付",
        content: "本次支付将使用余额进行支付，是否继续！",
        onOk: async () => {
          let params = {
            userId: this.user_info.id,
            memberLevel: this.memberLevel,
            durationType: this.durationType,
          };
          console.log(params);
          let result = await buyMember(params);
          console.log("result", result);
          if (result && result.data && result.data.code == 200) {
            this.getMember();
            this.$Message.info("购买成功");
          } else if (result && result.data && result.data.code == 206) {
            this.$Modal.confirm({
              title: "提示",
              content: "余额不足，请先充值！",
              okText: "去充值",
              onOk: () => {
                this.$router.push("/personal?action=my_account");
              },
              onCancel: () => {
                // this.$Message.info('已取消');
              },
            });
          } else {
            this.$Message.info("购买失败！");
          }
        },
        onCancel: () => {
          this.$Message.info("已取消");
        },
      });
    },
    buyBtnHandle(type) {
      this.buy_active = type;
    },
    memberBtn() {
      this.getBuyQrcode();
      this.getMemberList();
    },
    closeMemberDialog() {},
    memberHandle(type) {
      this.member_active = type;
      if (type === "one") {
        // this.priceActive = 1;
        if (this.smallSwitch) {
          this.priceBtnHandle(this.smallSwitch);
        }
      } else if (type === "two") {
        // this.priceActive = 5;
        if (this.middleSwitch) {
          this.priceBtnHandle(this.middleSwitch);
        }
      } else if (type === "three") {
        // this.priceActive = 9;
        if (this.highSwitch) {
          this.priceBtnHandle(this.highSwitch);
        }
      }
    },
    async getMember() {
      let result = await getMember(this.user_info.id);
      if (result && result.data && result.data.code == 200) {
        this.isMember = !!result.data.data;
        this.member = result.data.data;
      } else {
        
      }
    },
    async getMemberList() {
      let result = await getMemberList();
      // console.log("会员特权简介", result);
      if (result && result.data && result.data.code == 200) {
        // result.data.data
        // console.log(result.data.data.rows.map(item=>{return {...item,introduction:JSON.parse(item.introduction)}}));
        this.memberList = result.data.data.rows.map((item) => {
          return { ...item, introduction: JSON.parse(item.introduction) };
        });
      } else {
        
      }
    },
    async getData() {
      let result = await getMemberConfig();
      // console.log("会员配置信息", result);
      if (result && result.data && result.data.code == 200) {
        this.member_info = result.data.data;
        this.isOpenMember = result.data.data.isOpenMember === 1 ? true : false;
        if(!this.isOpenMember){
          this.$router.push({path:'/'});
        }
        let {
          smallMemberMonthSwitch,
          smallMemberForeverSwitch,
          smallMemberYearSwitch,
          smallMemberQuarterSwitch,
          middleMemberMonthSwitch,
          middleMemberForeverSwitch,
          middleMemberYearSwitch,
          middleMemberQuarterSwitch,
          highMemberMonthSwitch,
          highMemberForeverSwitch,
          highMemberYearSwitch,
          highMemberQuarterSwitch,
        } = result.data.data;
        this.memberLevelSwitch = {
          small: {
            smallMemberMonthSwitch,
            smallMemberForeverSwitch,
            smallMemberYearSwitch,
            smallMemberQuarterSwitch,
          },
          middle: {
            middleMemberMonthSwitch,
            middleMemberForeverSwitch,
            middleMemberYearSwitch,
            middleMemberQuarterSwitch,
          },
          high: {
            highMemberMonthSwitch,
            highMemberForeverSwitch,
            highMemberYearSwitch,
            highMemberQuarterSwitch,
          },
        };

        console.log(this.memberLevelSwitch);
      } else {
        
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.page-member {
  .member {
    width: 100%;
    height: auto;
    padding: 60px 0 30px;
    // z-index: 99999999;
    // padding-bottom: 60px;
    // padding-top: 80px;
    // position: fixed;
    // top: 0;
    // bottom: 0;
    // overflow-y: scroll;
    // overflow-x: hidden;
    background: #ffffff;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    &::-webkit-scrollbar {
      width: 0 !important;
      height: 0;
    }
    .member-box {
      margin: 0 auto;
      //   width: 920px;
      width: 1200px;
      min-height: 720px;
      background-color: #ffffff;
      position: relative;
      overflow: hidden;
      .member-left {
        display: block;
        // position: absolute;
        // top: 0;
        // left: 0;
        // width: 920px;
        // min-height: 720px;
        // background: aqua;
        // transition: left .2s;
        .member-header {
          width: 100%;
          height: 166px;
          // background-color: #313233;
          background-image: url("/img/pc/member-bg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: relative;
          .close {
            position: absolute;
            cursor: pointer;
            right: 14px;
            top: 14px;
          }
          .member-user {
            padding: 50px 0 0 40px;
            display: flex;
            align-items: center;
            .author {
              width: 46px;
              height: 46px;
              background-color: #c6c8cc;
              border: solid 2px #daa249;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 50%;
                overflow: hidden;
              }
            }
            .name {
              font-size: 16px;
              font-weight: bold;
              color: #fbd395;
              margin: 0 10px;
            }
            .account {
              font-size: 16px;
              font-weight: bold;
              font-stretch: normal;
              color: #cacbcc;
            }
          }
          .member-btn-list {
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            width: 100%;
            height: 49px;
            .member-btn-item {
              cursor: pointer;
              width: 33.333333333333333%;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                display: block;
              }
              span {
                font-size: 18px;
                font-weight: bold;
                line-height: 18px;
                color: #ffffff;
              }
              span.active {
                font-size: 18px;
                // font-weight: bold;
                line-height: 18px;
                color: #b36f41;
              }
            }
          }
          .member-btn-list.one {
            background-image: url("/img/pc/member-one-bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
          .member-btn-list.two {
            background-image: url("/img/pc/member-two-bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
          .member-btn-list.three {
            background-image: url("/img/pc/member-three-bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
        .member-content {
          padding: 20px 40px;
          box-sizing: border-box;
          .content-title {
            display: flex;
            align-items: center;
            img {
              display: block;
            }
            span {
              font-size: 16px;
              font-weight: bold;
              line-height: 18px;
              color: #313233;
            }
          }
          .content-list {
            font-size: 14px;
            font-weight: bold;
            line-height: 18px;
            color: #313233;
          }
          .content-price {
            margin: 40px 0;
            display: flex;
            justify-content: space-between;
            .price-item {
              position: relative;
              cursor: pointer;
              width: 180px;
              height: 110px;
              border: solid 1px #c6c8cc;
              line-height: 110px;
              text-align: center;
              .price {
                font-size: 24px;
                font-weight: bold;
                color: #c56e35;
              }
              .hr {
                font-size: 24px;
                font-weight: bold;
                color: #7c7d80;
              }
              .date {
                font-size: 16px;
                font-weight: bold;
                color: #7c7d80;
              }
              .buy-active {
                display: none;
                position: absolute;
                right: -14px;
                bottom: -14px;
              }
            }
            .price-item.active {
              background-image: linear-gradient(
                  -45deg,
                  #f1c277 0%,
                  #fae8cb 100%
                ),
                linear-gradient(#5b6069, #5b6069);
              background-blend-mode: normal, normal;
              border: solid 1px #daa249;
              .price {
                color: #85583a;
              }
              .hr {
                color: #c69e6f;
              }
              .date {
                color: #c69e6f;
              }
              .buy-active {
                display: block;
              }
            }
          }
        }
        .content-hr {
          //   width: 920px;
          width: 1200px;
          height: 1px;
          background-color: #e9edf5;
        }
        .member-footer {
          padding: 30px 40px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          .footer-left {
            width: 700px;
            .left-title {
              font-size: 16px;
              font-weight: bold;
              line-height: 18px;
              color: #4a4b4d;
            }
            .left-buy {
              display: flex;

              .buy-item {
                display: flex;
                align-items: center;
                .buy-btn {
                  cursor: pointer;
                  width: 17px;
                  height: 17px;
                  background-color: #dadde0;
                  border: solid 1px #7c7e7f;
                  border-radius: 50%;
                }
                .buy-btn.active {
                  background-color: #dbb06d;
                  border: solid 1px #b48a49;
                }
                img {
                  display: block;
                }
                span {
                  margin: 35px 30px 35px 14px;
                  font-size: 16px;
                  font-weight: bold;
                  line-height: 18px;
                  color: #4a4b4d;
                }
                width: 50%;
              }
            }
            .left-agreement {
              font-size: 14px;
              font-weight: bold;
              color: #939599;
              display: flex;
              align-items: center;
              img {
                display: block;
              }
              .agreement {
                color: var(--theme-color);
                cursor: pointer;
              }
            }
          }
          .footer-right {
            width: 126px;
            height: 126px;
            background-color: #c6c8cc;
          }
        }
        .pay-btn {
          padding: 20px 40px;
          .ivu-btn {
            width: 137px;
            height: 38px;
            background-color: var(--theme-color);
            border: none;
            color: #fff;
            border-radius: 4px;
            font-size: 14px;
            padding: 0;
            text-align: center;
            line-height: 20px;
            font-weight: 700;
            font-style: normal;
            opacity: 1;
          }
        }
        .pay-btn-old {
          padding: 20px 40px;
        }
      }
      .member-left.active {
        display: none;
        // left: -920px;
      }
      .member-left.active + .member-right {
        display: block;
        // left: 0px;
      }
      .member-right {
        display: none;
        // position: absolute;
        // top: 0;
        // left: 920px;
        // width: 920px;
        // min-height: 720px;
        // background: red;
        // transition: left .2s;
      }
    }
  }
}
</style>